<style>
    .row-bettween {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        /* justify-content: space-between; */
    }

    .top-item {
        /* flex: 1; */
        padding: 5px 10px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        font-size: 24px;
        border-radius: 10px;
        margin-left: 20px;
        margin-bottom: 10px;
        min-width: 230px;
    }

    .top-item span {
        font-size: 12px;
    }

    .row-flex {
        display: flex;

    }

    .flex-wrap {
        display: flex;
        flex-wrap: wrap;
    }

    .data-box {
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
        margin-bottom: 20px;
    }

    .data-info {
        padding: 20px 10px;
        margin-top: 20px;
    }

    .data-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .data-item>div {
        flex: 1;
    }

    .data-item>div>div {
        margin-top: 5px;
    }

    .echart-box {
        background-color: #fff;
        border-radius: 10px;
    }

    .labels {
        padding: 10px 20px;
        background-color: #fff;
        border-bottom: 1px solid #ccc;
        margin-bottom: 20px;
    }
</style>
<div id="reportrange" class="datetimerange"
    style="background: #fff; cursor: pointer; padding: 10px 20px;border-radius: 10px; margin-bottom: 20px;">
    时间筛选 : <i class="fa fa-calendar"></i>&nbsp;
    <span></span> <i class="fa fa-caret-down"></i>
</div>

<div class="data-box">
    <div>核心数据</div>
    <div class="data-info">
        <div class="data-item">
            <div>
                <span>推广订单金额</span>
                <div>0.00</div>
            </div>
            <div>
                <span>支付佣金</span>
                <div>0.00</div>
            </div>
            <div>
                <span>订单数</span>
                <div>0.00</div>
            </div>
        </div>
        <div class="data-item">
            <div>
                <span>成交客户数</span>
                <div>0.00</div>
            </div>
            <div>
                <span>绑定客户数</span>
                <div>0.00</div>
            </div>
            <div>
                <span>邀请下级数</span>
                <div>0.00</div>
            </div>
        </div>
    </div>
</div>
<div class="echart-box">
    <div class="labels">本月指标变化趋势</div>
    <div id="order" style="width: 100%; height: 400px"></div>
</div>